<app-input>
  <mat-form-field class="textInput">
        <mat-select i18n-placeHolder="services.form.label.sas.selecttype"
                    [placeholder]="messages.services_form_label_sas_selecttype"
                    [(ngModel)]="type" (selectionChange)="changeType()">
            <mat-option *ngFor="let opt of types" [value]="opt">{{ TYPE[opt] }}</mat-option>
        </mat-select>
      <mat-hint align="end">
          <app-hint></app-hint>
      </mat-hint>
    </mat-form-field>
    <mat-icon appHelp
              i18n-matTooltip="services.form.tooltip.sas.selecttype"
              [matTooltip]="messages.services_form_tooltip_sas_selecttype">
    </mat-icon>
</app-input>

<ng-container *ngIf="type == TYPE.REMOTE">
    <app-remote></app-remote>
</ng-container>

<ng-container *ngIf="type == TYPE.TIME || type == TYPE.GROUPER">
    <app-time></app-time>
</ng-container>

<ng-container *ngIf="type == TYPE.GROUPER">
    <app-grouper></app-grouper>
</ng-container>

<ng-container *ngIf="type == TYPE.SURROGATE">
    <app-surrogate></app-surrogate>
</ng-container>

<ng-container *ngIf="type == TYPE.GROOVY_SURROGATE">
  <app-groovy-surrogate></app-groovy-surrogate>
</ng-container>

<ng-container *ngIf="type == TYPE.GROOVY">
    <app-groovy></app-groovy>
</ng-container>
